<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div class="checkPointIds_change_scc">
                    <el-select filterable v-if='role_off' popper-class="xiala_css" @change="checkPointIds_change"
                        collapse-tags collapse-tags-tooltip clearable v-model="checkPointIds" placeholder="请选择客户"
                        style="width: 260px">
                        <!-- <template #header>
                            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
                                全选
                            </el-checkbox>
                        </template> -->
                        <el-option v-for="item in getCustomerList_list" :key="item.id" :label="item.customerName"
                            :value="item.id" />
                    </el-select>
                    <el-select filterable popper-class="xiala_css" @change="getPipeLineListByCusId_change" collapse-tags
                        collapse-tags-tooltip multiple clearable v-model="getPipeLineListByCusId_value"
                        placeholder="请选择管线" style="width: 260px;margin-left:15px;">
                        <template #header>
                            <el-checkbox v-model="checkAll2" :indeterminate="indeterminate2" @change="handleCheckAll2">
                                全选
                            </el-checkbox>
                        </template>
                        <el-option v-for="item in getPipeLineListByCusId_list" :key="item.id" :label="item.pipeLineName"
                            :value="item.id" />
                    </el-select>
                    <el-select filterable popper-class="xiala_css" collapse-tags collapse-tags-tooltip multiple
                        clearable v-model="getCheckPointListByLineId_value" placeholder="请选择监测点"
                        style="width: 260px;margin-left:15px;">
                        <template #header>
                            <el-checkbox v-model="checkAll3" :indeterminate="indeterminate3" @change="handleCheckAll3">
                                全选
                            </el-checkbox>
                        </template>
                        <el-option v-for="item in getCheckPointListByLineId_list" :key="item.id"
                            :label="item.checkPointName" :value="item.id" />
                    </el-select>



                    <!-- <el-date-picker popper-class="time_css" style="width: 340px;margin-left:15px;"
                        :default-time="defaultTime" v-model="details_time" type="datetimerange"
                        start-placeholder="选择开始时间" end-placeholder="选择结束时间" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" /> -->
                    <el-date-picker v-model="find_data.startTime" type="datetime" style="margin-left:15px;"
                        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" />

                    <el-checkbox style="margin-left:15px;" v-model="checked_satellite" label="平均值" size="large" />

                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                    <el-button style="margin-left: 20px;height:30px" @click="out_btn" type="warning"
                        icon="Promotion">导出</el-button>
                </div>
                <!-- 功能按钮 -->
                <!-- <div class="del_btn_Css">

                    <el-button @click="del_btn" type="danger" icon="DeleteFilled">删除</el-button>
                    <el-button @click="out_btn" type="warning" icon="Promotion">导出</el-button>
                </div> -->
            </template>

            <div style="border: 2px solid black;" v-if="getKmlcpycList_off">
                <div style="width:100%;">
                    <table style="border: 1px solid black;" border="1" width="100%" align="center">
                        <tr style="border: 1px solid black;">
                            <td align="center" width="25%" style="border: 1px solid black;padding: 10px 0px;">数据类型</td>
                            <td align="center" width="75%" style="border: 1px solid black;" colspan="3">测试桩</td>

                        </tr>
                        <tr align="center" style="border: 1px solid black;">
                            <td width="25%" style="border: 1px solid black;padding: 10px 0px;">属于管线</td>
                            <td width="75%" style="border: 1px solid black;" colspan="3">{{ pipeLineIds_data }}</td>

                        </tr>
                        <tr align="center" style="border: 1px solid black;">
                            <td width="25%" style="border: 1px solid black;padding: 10px 0px;">统计时间</td>
                            <!-- <td width="75%" style="border: 1px solid black;" colspan="3">
                                {{ details_time[0] + '~' + details_time[1] }}</td> -->

                            <td width="75%" style="border: 1px solid black;" colspan="3">
                                {{ find_data.startTime }}</td>

                        </tr>
                        <tr align="center" style="border: 1px solid black;">
                            <td width="25%" style="border: 1px solid black;padding: 10px 0px;">测试桩总数</td>
                            <td width="25%" style="border: 1px solid black;">{{ getKmlcpycList_data.allCount }}</td>
                            <td width="25%" style="border: 1px solid black;">测试桩异常数量</td>
                            <td width="25%" style="border: 1px solid black;">{{ getKmlcpycList_data.abnormalCount }}
                            </td>
                        </tr>
                        <tr align="center" style="border: 1px solid black;">
                            <td style="border: 1px solid black; padding: 10px 0px;">制表日期</td>
                            <td style="border: 1px solid black;">{{ getCurrentDateTime2() }}</td>
                            <td style="border: 1px solid black;">制作人</td>
                            <td style="border: 1px solid black;">{{ customerIds_data }}</td>
                        </tr>
                    </table>
                </div>
                <div>
                    <el-tabs type="card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane style="overflow: auto;" label="基础数据" name="基础数据">
                            <div style="width:70vw;height:450px;">
                                <div ref="chart_container2" style="width: 70vw; height: 450px;">
                                </div>

                            </div>
                        </el-tab-pane>
                        <el-tab-pane style="overflow: auto;" label="ER电流" name="ER电流">
                            <div style="width:80vw;height:450px;">
                                <div ref="chart_container3" style="width: 80vw; height: 450px;"></div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane style="overflow: auto;" label="ER电压" name="ER电压">
                            <div style="width:80vw;height:450px;">
                                <div ref="chart_container4" style="width: 80vw; height: 450px;"></div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane style="overflow: auto;" label="ER电流密度" name="ER电流密度">
                            <div style="width:80vw;height:450px;">
                                <div ref="chart_container5" style="width: 80vw; height: 450px;"></div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane style="overflow: auto;" label="ER电阻" name="ER电阻">
                            <div style="width:80vw;height:450px;">
                                <div ref="chart_container6" style="width: 80vw; height: 450px;"></div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane style="overflow: auto;" label="ER极化电位" name="ER极化电位">
                            <div style="width:80vw;height:450px;">
                                <div ref="chart_container7" style="width: 80vw; height: 450px;"></div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane style="overflow: auto;" label="ER试片" name="ER试片">
                            <div style="width:80vw;height:450px;">
                                <div ref="chart_container8" style="width:80vw; height: 450px;"></div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane style="overflow: auto;" label="ER腐蚀率" name="ER腐蚀率">
                            <div style="width:80vw;height:450px;">
                                <div style="width:80vw;height:450px;overflow: auto;">
                                    <div ref="chart_container9" style="width:80vw; height: 450px;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="border: 1px solid black;width:100%;"></div>
                <div style="width:80vw;height:400px; margin-top:20px;">
                    <div ref="chart_container_yuan" style="width: 80vw; height: 400px;">
                    </div>

                </div>
                <div style="border: 1px solid black;width:100%;"></div>
                <div style="width:100%;height:450px;margin-top:20px;position: relative;">
                    <el-table :scrollbar-always-on="true" border height="100%" ref="multipleTableRef"
                        :data="getKmlcpycList_list">
                        <el-table-column label="序号" width="55" fixed type="index" />
                        <template v-for="item in table_data_list" :key="item.name">
                            <el-table-column v-if="item.enablePinning" :width="item.minWidth" :prop="item.name"
                                :label="item.displayName">
                                <template v-if="item.name == 'rules'" #="{ row, column, $index }">
                                    <span>{{ row.rules ? row.rules : '正常' }} </span>

                                </template>

                            </el-table-column>
                        </template>
                        <el-table-column fixed="right" label="Ope" width="45">
                            <template #header>
                                <el-icon @click="setting_btn" :size="20" :color="color">
                                    <Setting />
                                </el-icon>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div v-if="checkbox_off"
                        style="width:150px;height:450px;background:#fff;z-index: 9999;position: absolute;right: 45px;top: 0px;overflow-y: auto;overflow-x: clip;">

                        <el-checkbox class="drag_it" @change="checkbox_btn" v-for="item in table_data_list"
                            :key="item.name" v-model="item.enablePinning" :label="item.displayName" border>
                        </el-checkbox>
                    </div>
                </div>
                <div style="margin-top:20px">
                    <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                        v-model:current-page="page_data.pageNo" v-model:page-size="page_data.pageSize"
                        :page-sizes="[20, 50, 100, 200, 500]" :background="true"
                        layout="prev, pager, next, jumper,->,sizes,total," :total="page_total" />
                </div>
            </div>

            <div v-else style="width: 100%; height: 450px;font-size:20px;font-weight:700;text-align: center;
            line-height: 350px;color: #686822;">
                请先选择客户、管线、监测点
            </div>
        </el-card>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, onMounted, computed, watch, nextTick, markRaw } from 'vue'
import {
    getCustomerList, getPipeLineListByCusId, getCheckPointListByLineId, getCollAnalysis, downloadkmlcpycBase
} from '@/api/statistic_analysis.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { downFiles2, } from '@/utils/common.js'
import CircularJSON from 'circular-json'
onMounted(async () => {
    let test_pile_report = JSON.parse(localStorage.getItem('test_pile_report'))
    if (test_pile_report) {

        nuv_off.value = true
        await getCustomerList_api()
        await role_api()
    } else {
        await getCustomerList_api()
        await role_api()
    }



})
let nuv_off = ref(false)
const data_list = ref([''])

//#region 登录角色判断 
//  
let role_off = ref(true)
let role_id = ref('')
let role_customerId = ref('')
const role_api = () => {
    let luser = JSON.parse(localStorage.getItem('luser'))
    if (luser.loginName != 'admin') {
        role_off.value = false
        role_id.value = luser.id
        role_customerId.value = luser.customerId
        checkPointIds.value = null
        checkPointIds.value = role_customerId.value
        getCustomerList_list.value = []
        getCustomerList_list.value.push(role_customerId.value)
    }
}
// #endregion

//#region 搜索
//#region 平均值
const checked_satellite = ref(false)
//#endregion
//#region 客户
const getKmlcpycList_off = ref(false)
const getCustomerList_list = ref([])
const checkPointIds = ref([])
const checkAll = ref(false)
const indeterminate = ref(false)
watch(checkPointIds, (val) => {
    getPipeLineListByCusId_value.value = []
    getCheckPointListByLineId_value.value = []
    if (val.length === 0) {
        checkAll.value = false
        indeterminate.value = false
    } else if (val.length === getCustomerList_list.value.length) {
        checkAll.value = true
        indeterminate.value = false
    } else {
        indeterminate.value = true
    }
})
const handleCheckAll = async (val) => {
    getPipeLineListByCusId_value.value = []
    getCheckPointListByLineId_value.value = []
    indeterminate.value = false
    if (val) {
        checkPointIds.value = getCustomerList_list.value.map((_) => _.id)

    } else {
        checkPointIds.value = []
    }
    getCustomerList_api()
}
const checkPointIds_change = async (e) => {
    getPipeLineListByCusId_api()
}
const getCustomerList_api = () => {
    getPipeLineListByCusId_value.value = []
    getCheckPointListByLineId_value.value = []
    getCustomerList({}).then(res => {
        if (res.resultStatus.resultCode == '0000') {
            getCustomerList_list.value = res.value
            if (nuv_off.value) {
                console.log(1)
                let test_pile_report = JSON.parse(localStorage.getItem('test_pile_report'))
                checkPointIds.value = test_pile_report.customerIds
            }
            getPipeLineListByCusId_api()

        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }

    })
}


//#endregion

//#region 管线
const getPipeLineListByCusId_list = ref([])
const getPipeLineListByCusId_value = ref([])
const checkAll2 = ref(false)
const indeterminate2 = ref(false)
watch(getPipeLineListByCusId_value, (val) => {
    getCheckPointListByLineId_value.value = []
    if (val.length === 0) {
        checkAll2.value = false
        indeterminate2.value = false
    } else if (val.length === getPipeLineListByCusId_list.value.length) {
        checkAll2.value = true
        indeterminate2.value = false
    } else {
        indeterminate2.value = true
    }
})
const handleCheckAll2 = (val) => {
    getCheckPointListByLineId_value.value = []
    indeterminate2.value = false
    if (val) {
        getPipeLineListByCusId_value.value = getPipeLineListByCusId_list.value.map((_) => _.id)

    } else {
        getPipeLineListByCusId_value.value = []
    }
    getCheckPointListByLineId_api()
}
const getPipeLineListByCusId_change = async (e) => {
    await getCheckPointListByLineId_api()
}
const getPipeLineListByCusId_api = () => {
    getCheckPointListByLineId_value.value = []
    getPipeLineListByCusId(checkPointIds.value ? [checkPointIds.value] : data_list.value).then(res => {
        if (res.resultStatus.resultCode == '0000') {
            getPipeLineListByCusId_list.value = res.value
            if (nuv_off.value) {

                let test_pile_report = JSON.parse(localStorage.getItem('test_pile_report'))
                getPipeLineListByCusId_value.value = test_pile_report.pipeLineIds


            }
            getCheckPointListByLineId_api()

        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }

    })
}
//#endregion

//#region 监测点
const getCheckPointListByLineId_value = ref([])
const getCheckPointListByLineId_list = ref([])
const checkAll3 = ref(false)
const indeterminate3 = ref(false)
watch(getCheckPointListByLineId_value, (val) => {
    if (val.length === 0) {
        checkAll3.value = false
        indeterminate3.value = false
    } else if (val.length === getCheckPointListByLineId_list.value.length) {
        checkAll3.value = true
        indeterminate3.value = false
    } else {
        indeterminate3.value = true
    }
})
const handleCheckAll3 = (val) => {
    indeterminate3.value = false
    if (val) {
        getCheckPointListByLineId_value.value = getCheckPointListByLineId_list.value.map((_) => _.id)

    } else {
        getCheckPointListByLineId_value.value = []
    }
}
const getCheckPointListByLineId_api = () => {
    let ps = {
        deviceType: '1',
        ids: getPipeLineListByCusId_value.value.length > 0 ? getPipeLineListByCusId_value.value : data_list.value
    }



    getCheckPointListByLineId(ps).then(res => {

        if (res.resultStatus.resultCode == '0000') {
            getCheckPointListByLineId_list.value = res.value
            if (nuv_off.value) {
                let test_pile_report = JSON.parse(localStorage.getItem('test_pile_report'))
                getCheckPointListByLineId_value.value = test_pile_report.checkPointIds
                // details_time.value[1] = test_pile_report.endTime

                // details_time.value[0] = test_pile_report.startTime
                // details_time.value = [test_pile_report.startTime, test_pile_report.endTime]


                if (test_pile_report.isAverage == '1') {
                    checked_satellite.value = true
                } else {
                    checked_satellite.value = false
                }
                console.log(test_pile_report.isAverage, checked_satellite.value)
                getKmlcpycList_api()
                nuv_off.value = false
            }


        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }

    })
}
//#endregion

//#region 时间
// 获取今天的年月日
const getCurrentDateTime = () => {
    let currentDate = new Date();

    // 获取当前日期的时间戳（以毫秒为单位）
    let timestamp = currentDate.getTime();

    // 计算昨天的时间戳
    let yesterdayTimestamp = timestamp - (24 * 60 * 60 * 1000);

    // 使用昨天的时间戳创建日期对象
    let yesterdayDate = new Date(yesterdayTimestamp);

    // 从昨天的日期对象中提取年、月、日、小时、分钟和秒
    let year = yesterdayDate.getFullYear();
    let month = String(yesterdayDate.getMonth() + 1).padStart(2, '0');
    let day = String(yesterdayDate.getDate()).padStart(2, '0');

    // 构建格式为 "YYYY-MM-DD HH:mm:ss" 的昨天时间字符串
    let yesterdayTime = `${year}-${month}-${day}`;
    return yesterdayTime;
}
const getCurrentDateTime2 = () => {
    let now = new Date();

    let year = now.getFullYear().toString().padStart(4, '0');
    let month = (now.getMonth() + 1).toString().padStart(2, '0');
    let day = now.getDate().toString().padStart(2, '0');
    let hours = now.getHours().toString().padStart(2, '0');
    let minutes = now.getMinutes().toString().padStart(2, '0');
    let seconds = now.getSeconds().toString().padStart(2, '0');

    let dateTimeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    return dateTimeString;
}

const time1 = ref(getCurrentDateTime() + ' ' + '00:00:00')
const time2 = ref(getCurrentDateTime2())
const defaultTime = [
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
]
const details_time = ref([time1.value, time2.value])
//#endregion
//#region 异常统计图弹出

const chart = ref('')
const chart1 = ref('')

//#endregion
const search_btn = () => {
    if (checkPointIds.value.length <= 0) {
        return ElMessage({
            message: '请选择客户！',
            type: 'warning',
        })
    } else if (getPipeLineListByCusId_value.value.length <= 0) {
        console.log(1, getPipeLineListByCusId_value.value)
        return ElMessage({
            message: '请选择管线！',
            type: 'warning',
        })
    } else if (getCheckPointListByLineId_value.value.length <= 0) {
        console.log(2, getCheckPointListByLineId_value.value)
        return ElMessage({
            message: '请选择监测点！',
            type: 'warning',
        })
    } else if (!find_data.startTime) {
        return ElMessage({
            message: '请选择时间！',
            type: 'warning',
        })
    }
    // else if (!details_time.value) {
    //     return ElMessage({
    //         message: '请选择时间！',
    //         type: 'warning',
    //     })
    // }

    getKmlcpycList_api()

}
const pipeLineIds_data = ref('')
const getKmlcpycList_list = ref([])
const getKmlcpycList_data = ref('')
const customerIds_data = ref('')

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    page_data.value.pageNo = 1
    getKmlcpycList_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    getKmlcpycList_api()
}

const page_data = ref({
    pageSize: 20,
    pageNo: 1
})

const page_total = ref(0)

const getKmlcpycList_api = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    let ps = {
        checkPointIds: getCheckPointListByLineId_value.value,
        customerIds: [checkPointIds.value],
        pipeLineIds: getPipeLineListByCusId_value.value,
        // startTime: details_time.value[0],
        // endTime: details_time.value[1],
        startTime: find_data.startTime,
        endTime: '',

        deviceType: '1',
        isAverage: checked_satellite.value ? '1' : '0',
        pageSize: page_data.value.pageSize,
        pageNo: page_data.value.pageNo
    }
    let es = {
        checkPointIds: getCheckPointListByLineId_value.value,
        customerIds: checkPointIds.value,
        pipeLineIds: getPipeLineListByCusId_value.value,
        // startTime: details_time.value[0],
        // endTime: details_time.value[1],
        startTime: find_data.startTime,
        endTime: '',
        deviceType: '1',
        isAverage: checked_satellite.value ? '1' : '0',
    }
    // localStorage.setItem('test_pile_report', CircularJSON.stringify(es))
    getCollAnalysis(ps).then(res => {
        if (res.resultStatus.resultCode == '0000') {
            let pipeLineIds = ps.pipeLineIds
            let pipeLineIds_list = []
            for (let i = 0; i < pipeLineIds.length; i++) {
                for (let j = 0; j < getPipeLineListByCusId_list.value.length; j++) {
                    if (pipeLineIds[i] == getPipeLineListByCusId_list.value[j].id) {
                        pipeLineIds_list.push(getPipeLineListByCusId_list.value[j].pipeLineName)
                    }
                }
            }
            pipeLineIds_data.value = pipeLineIds_list.join(',')
            for (let i = 0; i < getCustomerList_list.value.length; i++) {
                if (checkPointIds.value == getCustomerList_list.value[i].id) {
                    customerIds_data.value = getCustomerList_list.value[i].customerName
                }
            }

            getKmlcpycList_data.value = res.value
            getKmlcpycList_list.value = res.value.listCheckPoint
            page_total.value = res.value.allCount
            getKmlcpycList_off.value = true
            if (res.value.abnormalList == null || res.value.abnormalList.length == 0) {
                let pieCountArr = []
                let normalData = {
                    name: "正常",
                    value: res.value.allCount,
                }
                pieCountArr.push(normalData)
                chart_yuan(['正常'], pieCountArr)
            } else {
                let pieRulesArr = []
                let pieCountArr = []
                for (let i in res.value.abnormalList) {

                    pieRulesArr.push(res.value.abnormalList[i].rules)
                    let data = {
                        name: res.value.abnormalList[i].rules,
                        value: res.value.abnormalList[i].count
                    }
                    pieCountArr.push(data)
                }
                chart_yuan(pieCountArr, pieCountArr)
            }
            if (activeName.value == '基础数据') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                basic_data()
            } else if (activeName.value == 'ER电流') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                ER_current()
            } else if (activeName.value == 'ER电压') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                ER_voltage()
            } else if (activeName.value == 'ER电流密度') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                ER_current_density()
            } else if (activeName.value == 'ER电阻') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                ER_resistance()
            } else if (activeName.value == 'ER极化电位') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                ER_polarization_potential()
            } else if (activeName.value == 'ER试片') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                ER_test_piece()
            } else if (activeName.value == 'ER腐蚀率') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                ER_corrosion_rate()
            }

        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }
        loading.close()
    })
}
const activeName = ref('基础数据')
const chart_container2 = ref('')
const handleClick = (tab, event) => {

    if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
        chart.value.dispose();
    }
    if (tab.props.name == '基础数据') {
        basic_data()
    } else if (tab.props.name == 'ER电流') {
        ER_current()
    } else if (tab.props.name == 'ER电压') {
        ER_voltage()
    } else if (tab.props.name == 'ER电流密度') {
        ER_current_density()
    } else if (tab.props.name == 'ER电阻') {
        ER_resistance()
    } else if (tab.props.name == 'ER极化电位') {
        ER_polarization_potential()
    } else if (tab.props.name == 'ER试片') {
        ER_test_piece()
    } else if (tab.props.name == 'ER腐蚀率') {
        ER_corrosion_rate()
    }
}
// 基础数据
const basic_data = () => {
    nextTick(() => {
        let terminalNumberArr = []
        let batVoltageArr = []
        let onPotentialArr = []
        let offPotentialArr = []
        let acPotentialArr = []
        let selfPotentialArr = []
        let erCorBatVolArr = []
        let gradedPotentialArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                terminalNumberArr.push(getKmlcpycList_list.value[i].terminalName)
                batVoltageArr.push(getKmlcpycList_list.value[i].batVoltage)
                onPotentialArr.push(getKmlcpycList_list.value[i].onPotential)
                offPotentialArr.push(getKmlcpycList_list.value[i].offPotential)
                acPotentialArr.push(getKmlcpycList_list.value[i].acPotential)
                selfPotentialArr.push(getKmlcpycList_list.value[i].selfPotential)
                erCorBatVolArr.push(getKmlcpycList_list.value[i].erCorBatVol)
                gradedPotentialArr.push(getKmlcpycList_list.value[i].gradedPotential)
            }
            if (terminalNumberArr.length > 25) {
                xIetm = parseInt(terminalNumberArr.length / 25);
            } else {
                xIetm = 0;
            }
        }



        chart.value = markRaw(echarts.init(chart_container2.value));
        let option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: ["电池电压", "通电电位", "断电电位", "交流杂散电压", "自然电位", "ER腐蚀仪电池电压", "牺牲阳极输出电流"],
                textStyle: {
                    fontSize: 16,
                    fontWeight: 600
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            animation: false,
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                // right: '10%',
                bottom: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                name: '电压/V',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '终端名称',
                data: terminalNumberArr,
                axisLabel: {
                    show: true,
                    interval: xIetm,
                    rotate: 45,

                    textStyle: {
                        fontWeight: 600
                    }

                },
                // axisTick: {length:5},
            },
            series: [{
                name: "电池电压",
                type: 'line',
                stack: 'Total',
                data: batVoltageArr,
                symbolSize: 2,
                showSymbol: false,
                connectNulls: true,//添加此属性
                markLine: {
                    data: [
                        { yAxis: -0.85, name: '' },
                        { yAxis: -1.2, name: '' },
                        { yAxis: 4, name: '' }
                    ]
                }
            }, {
                name: '通电电位',
                type: 'line',
                data: onPotentialArr,
                symbolSize: 2,
                showSymbol: false,
                connectNulls: true,//添加此属性
                itemStyle: {
                    normal: {
                        color: 'red',  //圈圈的颜色
                        lineStyle: {
                            color: 'red'  //线的颜色
                        }
                    }
                },
                markLine: {
                    data: [
                        { yAxis: -0.85, name: '' },
                        { yAxis: -1.2, name: '' },
                        { yAxis: 4, name: '' }
                    ]
                }
            }, {
                name: '断电电位',
                type: 'line',
                symbolSize: 2,
                showSymbol: false,
                connectNulls: true,//添加此属性
                data: offPotentialArr,
                itemStyle: {
                    normal: {
                        color: '#38D621',
                        lineStyle: {
                            color: '#38D621'
                        }
                    }
                },
                markLine: {
                    data: [
                        { yAxis: -0.85, name: '' },
                        { yAxis: -1.2, name: '' },
                        { yAxis: 4, name: '' }
                    ]
                }
            }, {
                name: '交流杂散电压',
                type: 'line',
                data: acPotentialArr,
                symbolSize: 2,
                showSymbol: false,
                connectNulls: true,//添加此属性
                itemStyle: {
                    normal: {
                        color: '#A4850A',
                        lineStyle: {
                            color: '#A4850A'
                        }
                    }
                },
                markLine: {
                    data: [
                        { yAxis: -0.85, name: '' },
                        { yAxis: -1.2, name: '' },
                        { yAxis: 4, name: '' }
                    ]
                }
            }, {
                name: '自然电位',
                type: 'line',
                data: selfPotentialArr,
                symbolSize: 2,
                showSymbol: false,
                connectNulls: true,//添加此属性
                itemStyle: {
                    normal: {
                        color: '#616161',
                        lineStyle: {
                            color: '#616161'
                        }
                    }
                },
                markLine: {
                    data: [
                        { yAxis: -0.85, name: '' },
                        { yAxis: -1.2, name: '' },
                        { yAxis: 4, name: '' }
                    ]
                }
            }, {
                name: 'ER腐蚀仪电池电压',
                symbolSize: 2,
                showSymbol: false,
                connectNulls: true,//添加此属性
                type: 'line',
                data: erCorBatVolArr,
                itemStyle: {
                    normal: {
                        color: '#0270BC',
                        lineStyle: {
                            color: '#0270BC'
                        }
                    }
                },
                markLine: {
                    data: [
                        { yAxis: -0.85, name: '' },
                        { yAxis: -1.2, name: '' },
                        { yAxis: 4, name: '' }
                    ]
                }
            }, {
                name: '牺牲阳极输出电流',
                type: 'line',
                data: gradedPotentialArr,
                symbolSize: 2,
                showSymbol: false,
                connectNulls: true,//添加此属性
                itemStyle: {
                    normal: {
                        color: '#1E1E1E',
                        lineStyle: {
                            color: '#1E1E1E'
                        }
                    }
                },
                markLine: {
                    data: [
                        { yAxis: -0.85, name: '' },
                        { yAxis: -1.2, name: '' },
                        { yAxis: 4, name: '' }
                    ]
                }
            }]
        };
        chart.value.setOption(option);

        let png_img = chart.value.getDataURL()
        let reg = new RegExp("data:image/png;base64,", "g")
        file.value = png_img.replace(reg, "")
    })
}
// ER电流
const chart_container3 = ref('')
const ER_current = () => {
    nextTick(() => {
        let terminalNumberArr = []
        let erDirectCurrentAArr = []
        let erDirectCurrentBArr = []
        let erExchangeCurrentAArr = []
        let erExchangeCurrentBArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                terminalNumberArr.push(getKmlcpycList_list.value[i].terminalName)
                erDirectCurrentAArr.push(getKmlcpycList_list.value[i].erDirectCurrentA)
                erDirectCurrentBArr.push(getKmlcpycList_list.value[i].erDirectCurrentB)
                erExchangeCurrentAArr.push(getKmlcpycList_list.value[i].erExchangeCurrentA)
                erExchangeCurrentBArr.push(getKmlcpycList_list.value[i].erExchangeCurrentB)
            }
            if (terminalNumberArr.length > 25) {
                xIetm = parseInt(terminalNumberArr.length / 25);
            } else {
                xIetm = 0;
            }
        }
        chart.value = markRaw(echarts.init(chart_container3.value));
        let series = [{
            name: 'ER探头1直流电流',
            type: 'line',
            data: erDirectCurrentAArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
            itemStyle: {
                normal: {
                    color: 'blue',
                    lineStyle: {
                        color: 'blue'
                    }
                }
            }
        }, {
            name: 'ER探头2直流电流',
            type: 'line',
            data: erDirectCurrentBArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
            itemStyle: {
                normal: {
                    color: 'red',
                    lineStyle: {
                        color: 'red'
                    }
                }
            }
        }, {
            name: 'ER探头1交流杂散电流',
            type: 'line',
            data: erExchangeCurrentAArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
            itemStyle: {
                normal: {
                    color: '#616161',
                    lineStyle: {
                        color: '#616161'
                    }
                }
            }
        }, {
            name: 'ER探头2交流杂散电流',
            type: 'line',
            data: erExchangeCurrentBArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
            itemStyle: {
                normal: {
                    color: '#D5A90F',
                    lineStyle: {
                        color: '#D5A90F'
                    }
                }
            }
        }]
        let option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: ["ER探头1直流电流", "ER探头2直流电流", "ER探头1交流杂散电流", "ER探头2交流杂散电流"],
                textStyle: {
                    fontSize: 12,
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                // right: '10%',
                bottom: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                // name: '电压/V',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '终端编号',
                data: terminalNumberArr,
                axisLabel: {
                    interval: xIetm,
                    rotate: 45,
                    textStyle: {
                        fontWeight: 600
                    }
                },
            },
            series: series
        };
        chart.value.setOption(option);
        let png_img = chart.value.getDataURL()
        let reg = new RegExp("data:image/png;base64,", "g")
        file.value = png_img.replace(reg, "")
    })
}
// ER电压
const chart_container4 = ref('')
const ER_voltage = () => {
    nextTick(() => {
        let terminalNumberArr = []
        let erExchangeVoltageAArr = []
        let erExchangeVoltageBArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                terminalNumberArr.push(getKmlcpycList_list.value[i].terminalName)
                erExchangeVoltageAArr.push(getKmlcpycList_list.value[i].erExchangeVoltageA)
                erExchangeVoltageBArr.push(getKmlcpycList_list.value[i].erExchangeVoltageB)
            }
            if (terminalNumberArr.length > 25) {
                xIetm = parseInt(terminalNumberArr.length / 25);
            } else {
                xIetm = 0;
            }
        }
        chart.value = markRaw(echarts.init(chart_container4.value));
        let series = [{
            name: 'ER探头1交流杂散电压',
            type: 'line',
            data: erExchangeVoltageAArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }, {
            name: 'ER探头2交流杂散电压',
            type: 'line',
            data: erExchangeVoltageBArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }]

        let option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: ["ER探头1交流杂散电压", "ER探头2交流杂散电压"],
                textStyle: {
                    fontSize: 12,
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                // right: '10%',
                bottom: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                // name: '电压/V',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '终端编号',
                data: terminalNumberArr,
                axisLabel: {
                    interval: xIetm,
                    rotate: 45,
                    textStyle: {
                        fontWeight: 600
                    }
                },
            },
            series: series
        };
        chart.value.setOption(option);
        let png_img = chart.value.getDataURL()
        let reg = new RegExp("data:image/png;base64,", "g")
        file.value = png_img.replace(reg, "")
    })
}
// ER电流密度
const chart_container5 = ref('')
const ER_current_density = () => {
    nextTick(() => {
        let terminalNumberArr = []
        let erExchangeCurrentADensityArr = []
        let erExchangeCurrentBDensityArr = []
        let erDirectCurrentADensityArr = []
        let erDirectCurrentBDensityArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                terminalNumberArr.push(getKmlcpycList_list.value[i].terminalName)
                erExchangeCurrentADensityArr.push(getKmlcpycList_list.value[i].erExchangeCurrentADensity)
                erExchangeCurrentBDensityArr.push(getKmlcpycList_list.value[i].erExchangeCurrentBDensity)
                erDirectCurrentADensityArr.push(getKmlcpycList_list.value[i].erDirectCurrentADensity)
                erDirectCurrentBDensityArr.push(getKmlcpycList_list.value[i].erDirectCurrentBDensity)
            }
            if (terminalNumberArr.length > 25) {
                xIetm = parseInt(terminalNumberArr.length / 25);
            } else {
                xIetm = 0;
            }
        }
        chart.value = markRaw(echarts.init(chart_container5.value));
        let series = [{
            name: 'ER探头1交流杂散电流密度',
            type: 'line',
            data: erExchangeCurrentADensityArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }, {
            name: 'ER探头2交流杂散电流密度',
            type: 'line',
            data: erExchangeCurrentBDensityArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }, {
            name: 'ER探头1直流电流密度',
            type: 'line',
            data: erDirectCurrentADensityArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }, {
            name: 'ER探头2直流电流密度',
            type: 'line',
            data: erDirectCurrentBDensityArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }]

        let option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: ["ER探头1直流电流密度", "ER探头2直流电流密度", "ER探头1交流杂散电流密度", "ER探头2交流杂散电流密度",],
                textStyle: {
                    fontSize: 12,
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                // right: '10%',
                bottom: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                // name: '电压/V',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '终端编号',
                data: terminalNumberArr,
                axisLabel: {
                    interval: xIetm,
                    rotate: 45,
                    textStyle: {
                        fontWeight: 600
                    }
                },
            },
            series: series
        };
        chart.value.setOption(option);
        let png_img = chart.value.getDataURL()
        let reg = new RegExp("data:image/png;base64,", "g")
        file.value = png_img.replace(reg, "")
    })
}
//ER电阻
const chart_container6 = ref('')
const ER_resistance = () => {
    nextTick(() => {
        let terminalNumberArr = []
        let erProbeResistanceAArr = []
        let erProbeResistanceBArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                terminalNumberArr.push(getKmlcpycList_list.value[i].terminalName)
                erProbeResistanceAArr.push(getKmlcpycList_list.value[i].erProbeResistanceA)
                erProbeResistanceBArr.push(getKmlcpycList_list.value[i].erProbeResistanceB)
            }
            if (terminalNumberArr.length > 25) {
                xIetm = parseInt(terminalNumberArr.length / 25);
            } else {
                xIetm = 0;
            }
        }
        chart.value = markRaw(echarts.init(chart_container6.value));
        let series = [{
            name: 'ER探头1电阻',
            type: 'line',
            data: erProbeResistanceAArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }, {
            name: 'ER探头2电阻',
            type: 'line',
            data: erProbeResistanceBArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }]

        let option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: ["ER探头1电阻", "ER探头2电阻"],
                textStyle: {
                    fontSize: 12,
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                // right: '10%',
                bottom: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                // name: '电压/V',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '终端编号',
                data: terminalNumberArr,
                axisLabel: {
                    interval: xIetm,
                    rotate: 45,
                    textStyle: {
                        fontWeight: 600
                    }
                },
            },
            series: series
        };
        chart.value.setOption(option);
        let png_img = chart.value.getDataURL()
        let reg = new RegExp("data:image/png;base64,", "g")
        file.value = png_img.replace(reg, "")
    })
}
// ER极化电位
const chart_container7 = ref('')
const ER_polarization_potential = () => {
    nextTick(() => {
        let terminalNumberArr = []
        let erTestPieceOutageAArr = []
        let erTestPieceOutageBArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                terminalNumberArr.push(getKmlcpycList_list.value[i].terminalName)
                erTestPieceOutageAArr.push(getKmlcpycList_list.value[i].erTestPieceOutageA)
                erTestPieceOutageBArr.push(getKmlcpycList_list.value[i].erTestPieceOutageB)
            }
            if (terminalNumberArr.length > 25) {
                xIetm = parseInt(terminalNumberArr.length / 25);
            } else {
                xIetm = 0;
            }
        }
        chart.value = markRaw(echarts.init(chart_container7.value));
        let series = [{
            name: 'ER探头1极化电位',
            type: 'line',
            data: erTestPieceOutageAArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }, {
            name: 'ER探头2极化电位',
            type: 'line',
            data: erTestPieceOutageBArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }]

        let option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: ["ER探头1极化电位", "ER探头2极化电位"],
                textStyle: {
                    fontSize: 12,
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                // right: '10%',
                bottom: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                // name: '电压/V',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '终端编号',
                data: terminalNumberArr,
                axisLabel: {
                    interval: xIetm,
                    rotate: 45,
                    textStyle: {
                        fontWeight: 600
                    }
                },
            },
            series: series
        };
        chart.value.setOption(option);
        let png_img = chart.value.getDataURL()
        let reg = new RegExp("data:image/png;base64,", "g")
        file.value = png_img.replace(reg, "")
    })
}
// ER试片
const chart_container8 = ref('')
const ER_test_piece = () => {
    nextTick(() => {
        let terminalNumberArr = []
        let erTestPieceThickAArr = []
        let erTestPieceThickBArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                terminalNumberArr.push(getKmlcpycList_list.value[i].terminalName)
                erTestPieceThickAArr.push(getKmlcpycList_list.value[i].erTestPieceThickA)
                erTestPieceThickBArr.push(getKmlcpycList_list.value[i].erTestPieceThickB)
            }
            if (terminalNumberArr.length > 25) {
                xIetm = parseInt(terminalNumberArr.length / 25);
            } else {
                xIetm = 0;
            }
        }
        chart.value = markRaw(echarts.init(chart_container8.value));
        let series = [{
            name: 'ER试片1厚度',
            type: 'line',
            data: erTestPieceThickAArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }, {
            name: 'ER试片2厚度',
            type: 'line',
            data: erTestPieceThickBArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }]

        let option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: ["ER试片1厚度", "ER试片2厚度"],
                textStyle: {
                    fontSize: 12,
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                // right: '10%',
                bottom: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                // name: '电压/V',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '终端编号',
                data: terminalNumberArr,
                axisLabel: {
                    interval: xIetm,
                    rotate: 45,
                    textStyle: {
                        fontWeight: 600
                    }
                },
            },
            series: series
        };
        chart.value.setOption(option);
        let png_img = chart.value.getDataURL()
        let reg = new RegExp("data:image/png;base64,", "g")
        file.value = png_img.replace(reg, "")
    })
}
// ER腐蚀率
const chart_container9 = ref('')
const ER_corrosion_rate = () => {
    nextTick(() => {
        let terminalNumberArr = []
        let erProbeResistanceCorRateAArr = []
        let erProbeResistanceCorRateBArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                terminalNumberArr.push(getKmlcpycList_list.value[i].terminalName)
                erProbeResistanceCorRateAArr.push(getKmlcpycList_list.value[i].erProbeResistanceCorRateA)
                erProbeResistanceCorRateBArr.push(getKmlcpycList_list.value[i].erProbeResistanceCorRateB)
            }
            if (terminalNumberArr.length > 25) {
                xIetm = parseInt(terminalNumberArr.length / 25);
            } else {
                xIetm = 0;
            }
        }
        chart.value = markRaw(echarts.init(chart_container9.value));
        let series = [{
            name: 'ER探头1腐蚀率',
            type: 'line',
            data: erProbeResistanceCorRateAArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }, {
            name: 'ER探头2腐蚀率',
            type: 'line',
            data: erProbeResistanceCorRateBArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性
        }]

        let option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: ["ER探头1腐蚀率", "ER探头2腐蚀率"],
                textStyle: {
                    fontSize: 12,
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],


            // {
            //     // orient: 'horizontal',//水平
            //     show: true, //显示滚动条
            //     start: 0, //起始值为20%
            //     end: 100,  //结束值为60%
            //     realtime: true,
            //     zoomOnMouseWheel: true,
            // },
            grid: {
                left: '15%',
                // right: '10%',
                bottom: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                // name: '电压/V',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '终端编号',
                data: terminalNumberArr,
                axisLabel: {
                    interval: xIetm,
                    rotate: 45,
                    textStyle: {
                        fontWeight: 600
                    }
                },
            },
            series: series
        };
        chart.value.setOption(option);
        let png_img = chart.value.getDataURL()
        let reg = new RegExp("data:image/png;base64,", "g")
        file.value = png_img.replace(reg, "")
    })
}

// 饼图
const chart_container_yuan = ref('')
const chart_yuan = (xValue, yValue) => {
    nextTick(() => {
        let yValue_vale_zong = 0
        for (let i = 0; i < yValue.length; i++) {
            yValue_vale_zong += Number(yValue[i].value)
        }
        for (let i = 0; i < yValue.length; i++) {
            yValue[i].name = yValue[i].name + ':' + yValue[i].value + '(' + ((yValue[i].value / yValue_vale_zong) * 100).toFixed(2) + '%)'
        }
        chart1.value = markRaw(echarts.init(chart_container_yuan.value));
        let series = [{

            name: '分类数据',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: yValue,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {

                fontSize: 20,

            },
        }]

        let option = {
            title: {
                text: '测试桩异常统计图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                // formatter: '{a} <br/>{b} : {c} ({d}%)'
                formatter: '{a} <br/>{b} '
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                top: 20,
                bottom: 20,
                data: xValue
            },
            series: series
        };
        chart1.value.setOption(option);

        // 监听图表渲染完成事件
        chart1.value.on('finished', function () {
            // 等待一段时间确保图表渲染完成
            let png_img = chart1.value.getDataURL()
            let reg = new RegExp("data:image/png;base64,", "g")
            file1.value = png_img.replace(reg, "")
        });





    })
}
//#endregion

//#region 分页列表
const list_data = ref([])
const find_data = reactive({
    pageNo: 1,
    pageSize: 20,
    checkPoints: [],
    customerIds: [],
    pipeLineIds: [],
    startTime: time1.value,
    endTime: "",
    rules: '',

})
const total = ref(0)



const list_api = () => {

    find_data.checkPoints = getCheckPointListByLineId_value.value,
        find_data.customerIds = checkPointIds.value,
        find_data.pipeLineIds = getPipeLineListByCusId_value.value,

        // find_data.startTime = details_time.value[0],
        // find_data.endTime = details_time.value[1],
        getKmlptycAlarmListByPage(find_data).then(res => {

            if (res.resultStatus.resultCode == '0000') {
                list_data.value = res.value.list
                total.value = res.value.total
            } else {
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'warning',
                })
            }

        })
}
//#endregion


//#region 表格数据处理
const table_data_list = reactive([
    { name: 'terminalNumber', displayName: '终端编号', minWidth: 150, enablePinning: true },
    { name: 'terminalName', displayName: '终端名称', minWidth: 200, enablePinning: true },
    // { name: 'rules', displayName: '告警信息', minWidth: 200, enablePinning: true },
    { name: 'sampTime', displayName: '采样时间', minWidth: 150, enablePinning: true },
    { name: 'receiveTime', displayName: '接收时间', minWidth: 200, enablePinning: true },
    { name: 'batVoltage', displayName: '电池电压/V', minWidth: 100, enablePinning: true },
    { name: 'onPotential', displayName: '通电电位/V', minWidth: 100, enablePinning: true },
    { name: 'offPotential', displayName: '断电电位/V', minWidth: 100, enablePinning: true },
    { name: 'acPotential', displayName: '交流杂散电压/V', minWidth: 200, enablePinning: true },
    { name: 'selfPotential', displayName: '自然电位/V', minWidth: 100, enablePinning: true },
    // { name: 'pointOffset', displayName: '电位极化值/V', minWidth: 120, enablePinning: true },
    { name: 'gradedPotential', displayName: '牺牲阳极输出电流/V', minWidth: 100, enablePinning: true },
    { name: 'humidity', displayName: '湿度/%', minWidth: 100, enablePinning: true },
    { name: 'temperature', displayName: '温度/℃', minWidth: 100, enablePinning: true },
    { name: 'rssi', displayName: '信号强度', minWidth: 100, enablePinning: true },
    { name: 'soilPH', displayName: '土壤PH', minWidth: 100, enablePinning: true },
    { name: 'soilResistivity', displayName: '土壤电阻率/Ω*m', minWidth: 150, enablePinning: true },
    { name: 'erExchangeVoltageA', displayName: 'ER探头1交流杂散电压/V', minWidth: 200, enablePinning: true },
    { name: 'erExchangeVoltageB', displayName: 'ER探头2交流杂散电压/V', minWidth: 200, enablePinning: true },
    { name: 'erExchangeCurrentA', displayName: 'ER探头1交流杂散电流/mA', minWidth: 200, enablePinning: true },
    { name: 'erExchangeCurrentB', displayName: 'ER探头2交流杂散电流/mA', minWidth: 200, enablePinning: true },
    { name: 'erDirectCurrentA', displayName: 'ER探头1直流电流/mA', minWidth: 180, enablePinning: true },
    { name: 'erDirectCurrentB', displayName: 'ER探头2直流电流/mA', minWidth: 180, enablePinning: true },
    { name: 'erExchangeCurrentADensity', displayName: 'ER探头1交流杂散电流密度/A/m² ', minWidth: 250, enablePinning: true },
    { name: 'erExchangeCurrentBDensity', displayName: 'ER探头2交流杂散电流密度/A/m² ', minWidth: 250, enablePinning: true },
    { name: 'erDirectCurrentADensity', displayName: 'ER探头1直流电流密度/A/m² ', minWidth: 250, enablePinning: true },
    { name: 'erDirectCurrentBDensity', displayName: 'ER探头2直流电流密度/A/m² ', minWidth: 250, enablePinning: true },
    { name: 'erProbeResistanceA', displayName: 'ER探头1电阻/mΩ', minWidth: 200, enablePinning: true },
    { name: 'erProbeResistanceB', displayName: 'ER探头2电阻/mΩ', minWidth: 200, enablePinning: true },
    { name: 'erTestPieceOutageA', displayName: 'ER探头1极化电位/V', minWidth: 200, enablePinning: true },
    { name: 'erTestPieceOutageB', displayName: 'ER探头2极化电位/V', minWidth: 200, enablePinning: true },
    { name: 'erCorBatVol', displayName: 'ER腐蚀仪电池电压/V', minWidth: 180, enablePinning: true },
    { name: 'erTestPieceThickA', displayName: 'ER试片1厚度/um', minWidth: 150, enablePinning: true },
    { name: 'erTestPieceThickB', displayName: 'ER试片2厚度/um', minWidth: 150, enablePinning: true },
    { name: 'erProbeResistanceCorRateA', displayName: 'ER探头1土壤腐蚀率/um/年', minWidth: 200, enablePinning: true },
    { name: 'erProbeResistanceCorRateB', displayName: 'ER探头2土壤腐蚀率/um/年', minWidth: 200, enablePinning: true },
    { name: 'longitude', displayName: '经度', minWidth: 100, enablePinning: true },
    { name: 'latitude', displayName: '纬度', minWidth: 100, enablePinning: true },
    { name: 'rules', displayName: '状态', minWidth: 200, enablePinning: true },
])




//#endregion

//#region 表格数据开关
const checkbox_off = ref(false)
const setting_btn = () => {
    checkbox_off.value = !checkbox_off.value
}

//#endregion




//#region 表格选择
const table_list = ref([])
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion

//#region 删除
const del_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        '是否确认删除该数据?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            let ps = []
            for (let i = 0; i < table_list.value.length; i++) {
                ps.push(table_list.value[i].id)
            }
            deleteKmlptyc(ps).then(res => {
                if (res.resultStatus.resultCode == '0000') {
                    list_api()
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            if (e == 'cancel') {
                ElMessage({
                    type: 'warning',
                    message: '取消删除成功',
                })
            }

        })

}
//#endregion

//#region 导出
const file1 = ref('')
const file = ref('')
const out_btn = () => {
    if (checkPointIds.value.length <= 0) {
        return ElMessage({
            message: '请选择客户！',
            type: 'warning',
        })
    } else if (getCheckPointListByLineId_value.value.length <= 0) {
        return ElMessage({
            message: '请选择管线！',
            type: 'warning',
        })
    } else if (getCheckPointListByLineId_value.value.length <= 0) {
        return ElMessage({
            message: '请选择监测点！',
            type: 'warning',
        })
    } else if (!find_data.startTime) {
        return ElMessage({
            message: '请选择时间！',
            type: 'warning',
        })
    }


    // else if (!details_time.value) {
    //     return ElMessage({
    //         message: '请选择时间！',
    //         type: 'warning',
    //     })
    // }

    let thName = []
    for (let i = 0; i < table_data_list.length; i++) {
        if (table_data_list[i].enablePinning == true) {
            thName.push(table_data_list[i].displayName)
        }

    }


    let ps = {
        checkPointIds: getCheckPointListByLineId_value.value.join(','),
        collTime: getCurrentDateTime2(),
        customerIds: checkPointIds.value,

        person: customerIds_data.value,
        pipeLineIds: getPipeLineListByCusId_value.value.join(','),
        pipeLines: pipeLineIds_data.value,
        // endTime: details_time.value[1],
        // startTime: details_time.value[0],
        endTime: '',
        startTime: find_data.startTime,
        thName: thName.join(','),

        file: file.value,
        file1: file1.value,

    }
    // return console.log(ps)
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    downloadkmlcpycBase(ps).then(res => {
        loading.close()
        downFiles2(res, '测试桩报表')



    })


}
//#endregion

</script>

<style scoped lang='scss'>
::v-deep(.el-tabs__item) {
    background-color: #DBE0E5;
    color: black;
    width: 100px;
    text-align: center;

}

::v-deep(.is-active) {
    background-color: #3D5674;
    color: #fff;

}

::v-deep(.el-scrollbar__thumb) {
    background-color: #000000 !important;
    ;


}


.del_btn_Css {
    margin-top: 10px;
}

.list_data_Css {
    width: 100%
}

.current_change_btn_css {
    margin-top: 20px
}




.map_input {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.div_bg:hover {
    background-color: darkgray;
}
</style>
<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}
</style>
